<!-- 
  指令一般都是在与DOM打交道

  自定义指令：
    Vue提供了很多内置的指令供我们使用，还提供了API可以让我们自定义指令

  注册指令
    1. 全局注册
      Vue.directive(name, 配置对象 | 简写函数)
        name - 指令的名字，不需要v-
        配置对象 - 有一些钩子函数供我们使用
                    - bind
                    - update
                    - unbind
                    - componentUpdate
                    - inserted
        简写函数 - 就是 bind 与 update 的一个简写函数
    2. 局部注册
      directives 选项
      {
        key1: 配置对象 | 简写函数,
        key2: 配置对象 | 简写函数,
      }
  使用指令
    将 指令名称 添加一个 v- 前缀用在元素上即可

  钩子函数会接受如下四个参数：
      el      - 当前指令所在元素的 DOM 对象
      binding - 指令的一些参数、表达式的值、修饰符 等数据
      VNode   - 当前指令所在元素的 虚拟DOM 对象
      oldVNode - 当前指令所在元素的 上一次的虚拟DOM 对象

  1. 实现一个 v-focus 指令，用于让 input 元素能自动获取焦点
  2. 实现一个 v-copy 指令，用于拷贝内容
      前置知识: 可以使用原生JS来操作文本的拷贝，但是比较复杂，要考虑兼容型问题，这时我们一般都会使用一个第三方的库 clipboard


  clipboard 的使用
      npm install clipboard

      const instance = new ClipboardJS(el, 配置对象)
        el - 要触发拷贝的元素的DOM对象，或css选择器
        配置对象 - 
                  text() {}     它的返回值就是拷贝的内容
                  action() {}   它的返回值是 copy || cut
                  target() {}   它的返回值是 控制要去拷贝的目标元素

      instance.on('success', () => {})    绑定拷贝成功的回调
      instance.on('error', () => {})      绑定拷贝失败的回调
 -->

<template>
  <div>
    <h1>App</h1>
    <button @click="count++">{{ count }}</button>
    <button @click="isShow = !isShow">Toggle</button>
    <button @click="fn1">手动获取焦点</button>
    <hr />

    <!-- 不传值的使用 -->
    <input v-focus:title.a.b="'张三'" type="text" />

    <hr />

    <input id="input" type="text" value="我是input的value" />

    <button data-clipboard-text="Hello" class="btn">点我，拷贝1</button>

    <button data-clipboard-text="World" class="btn">点我，拷贝2</button>

    <button
      data-clipboard-target="#input"
      data-clipboard-action="cut"
      class="btn"
    >
      点我，拷贝3
    </button>

    <button class="btn">点我，拷贝4</button>
  </div>
</template>

<script>
// 引入 clipboard
import ClipboardJS from "clipboard";

export default {
  directives: {
    // focus: {
    //   bind() {
    //     console.log("focus bind");
    //   },
    //   update() {
    //     console.log("focus update");
    //   },
    //   inserted() {
    //     console.log("focus inserted");
    //   },
    //   componentUpdated() {
    //     console.log("focus componentUpdated");
    //   },
    //   unbind() {
    //     console.log("focus unbind");
    //   },
    // },

    // focus(el, binding, vNode, oldVNode) {
    //   console.log("bind 与 update");
    //   console.log("el", el);
    //   console.log("binding", binding);
    //   console.log("vNode", vNode);
    //   console.log("oldVNode", oldVNode);
    // },

    focus: {
      inserted(el) {
        console.log("el", el);
        el.focus();
      },
    },
  },

  data() {
    return {
      count: 10,
      isShow: true,
    };
  },

  methods: {
    fn1() {
      document.querySelector("input").focus();
    },
  },

  mounted() {
    // 初始化 ClipboardJS
    const instance = new ClipboardJS(".btn", {
      // text(tigger) {
      //   // tigger 参数，是触发这个拷贝操作的DOM元素
      //   console.log("tigger", tigger);
      //   // console.log(this); // this 是 instance

      //   // 返回值的内容，就是拷贝的内容
      //   return tigger.getAttribute("data-text");
      // },
      target() {
        return document.querySelector("#input");
      },
      action() {
        return "cut";
      },
    });
    // const instance = new ClipboardJS(".btn");

    instance.on("success", () => {
      console.log("拷贝成功");
    });

    instance.on("error", (error) => {
      console.log("拷贝失败", error);
    });
  },
};
</script>
